<template>
  <!-- 详情开始 -->
  <a-modal
    :maskClosable="false"
    title="关联付款单"
    :width="1400"
    :bodyStyle="{
      padding: '0 24px'
    }"
    :visible="visible"
    @cancel="handleCancel"
    cancelText="关闭">
    <a-card
      :bordered="false"
      :bodyStyle="{
        padding: '10px 24px'
      }">
      <div class="table-page-search-wrapper">
        <a-form layout="inline" @keyup.enter.native="searchByquery">
      </a-form>
    </div>
      <!-- 查询区域-END -->

      <!-- table区域-begin -->
      <div>
        <a-table
          ref="table"
          rowKey="id"
          bordered
          :scroll="{x: '100%'}"
          :components="draggableComponent"
          :columns="dragResizeColumns"
          :dataSource="dataSource"
          :pagination="ipagination"
          :loading="loading"
          class="j-table-force-nowrap"
          wrapClassName="ant-modal-cust-warp"
          @change="handleTableChange">
          <div slot="collectBillNo" slot-scope="text, record">
            <a @click="onDetail(record.collectBillId)">{{record.collectBillNo}}</a>
          </div>
          
        </a-table>
      </div>
      <!-- 详情结束 -->
    </a-card>
    <template slot="footer">
      <a-button @click.stop="()=>{visible=false}">关闭</a-button>
    </template>
  </a-modal>
  <!-- 详情结束 -->
</template>

<script>

  import { filterObj } from '@/utils/util';
  import { getAction,postAction,getFileAccessHttpUrl } from '@/api/manage'
  import SelectCompanyInput from '@/views/scy/components/SelectCompanyInput'
  import SelectCustomerInput from '@/views/scy/components/SelectCustomerInput'
  import SelectUserByDep from '@/views/scy/components/SelectUserByDep'
  import { DragResizable } from '@/mixins/DragResizable'
  import CommonFlowList from '@/views/components/CommonFlowList.vue' // 审批历史流程列表组件

  export default {
    name: 'ErpFinanceKingdeeCollectMoneyBillListPenetrate',
    components: {
      SelectCompanyInput,
      SelectCustomerInput,
      SelectUserByDep,
      CommonFlowList
    },
    props: [],
    mixins: [DragResizable],
    data() {
      return {
        createTimeRange:[],
        visibleDetail: false,
        title: '收款明细',
        queryParam: {},
        toggleSearchStatus: false,
        dragResizeColumns: [
        {
            title: '序号',
            dataIndex: '',
            key:'rowIndex',
            width:60,
            align:"center",
            customRender:function (t,r,index) {
              return parseInt(index)+1;
            }
          },
          {
            title:'下推人',
            align:"center",
            dataIndex: 'createBy_dictText',
            width:160,
            ellipsis: true
          },
          {
            title:'下推日期',
            align:"center",
            dataIndex: 'createTime',
            width:160,
            ellipsis: true
          },
          {
            title:'单据编号',
            align:"center",
            dataIndex: 'fbillno',
            scopedSlots: { customRender: 'fbillno' },
            width:180,
            ellipsis: true
          },
          {
            title:'结算组织',
            align:"center",
            dataIndex: 'fsettleorgiddata_dictText',
            width:200,
            ellipsis: true
          },
          {
            title:'实付金额',
            align:"center",
            width:150,
            dataIndex: 'frealpayamountforH',
          },
          {
            title:'往来单位类型',
            align:"center",
            width:120,
            dataIndex: 'fcontactunittype_dictText',
          },
          {
            title:'往来单位',
            align:"center",
            width:250,
            dataIndex: 'fcontactunitdata_dictText',
            ellipsis: true
          },
          {
            title:'是否同步',
            align:"center",
            dataIndex: 'isSync_dictText',
            width:80,
          },
          {
            title:'支付状态',
            align:"center",
            width:100,
            dataIndex: 'payStatus_dictText',
          },
        ],
        url: {
          urlList: '/api/erp/finance/kingdee/erpFinanceKingdeePaymentBill/allList'
        },
        dataSource: [],
        loading: false,
        ipagination: {
          current: 1,
          pageSize: 10,
          pageSizeOptions: ['10', '20', '30', '50', '100', '200'],
          showTotal: (total, range) => {
            return range[0] + '-' + range[1] + ' 共' + total + '条'
          },
          showQuickJumper: true,
          showSizeChanger: true,
          total: 0
        },
        isorter: {
          column: 'createTime',
          order: 'desc'
        },
        scrollTrigger: { x: true },
        visible: false,
        dictOptions: {},
        createTime: [],
        billNo:null
      }
    },
    created() {
      this.loadData();
      // 该方法触发屏幕自适应
      this.resetScreenSize();
      this.refresh();
      // 加载数据字典信息
      this.initDictConfig();
      this.dragResizeColumnswidth = this.dragResizeColumns.map(val => {
        return val.width
      })
    },
    computed: {
    },
    methods: {
      downloadFile(text) {
      if (!text) {
        this.$message.warning('无可下载文件')
        return
      }
      if (text.indexOf(',') > 0) {
        text = text.substring(0, text.indexOf(','))
      }
      let url = getFileAccessHttpUrl(text)
      window.open(url)
    },
      initDictConfig() {
      },
      onDetail(record) {
        this.visible = false
        this.visibleDetail = true
        this.$nextTick(()=>{
          getAction(this.url.queryById,{id:record}).then(res=>{
            if(!!res&&!!res.result){
              this.$refs.realCollectMoneyForm.edit(res.result);
               // 查询流程
              let params = { flowCode: this.flowCode, dataId: res.result.id };// 查询条件
              this.viewTrack(params);
            }
          })
        //  this.$refs.realCollectMoneyForm.edit(record);
        });
      },
      handleCancelDetail() {
        this.visible = true
        this.visibleDetail = false
      },
      handleToggleSearch() {
        this.toggleSearchStatus = !this.toggleSearchStatus;
      },
      handleTableChange(pagination, filters, sorter) {
      // 分页、排序、筛选变化时触发
        this.filters = {}
        if (Object.keys(filters).length > 0) {
          for (let key in filters) {
            let value = filters[key].join(',')
            if (value) {
              if (key.indexOf('_dictText') != -1) {
                key = key.substring(0, key.indexOf('_dictText'))
              }
              this.filters[key] = value
            }
          }
        }
        if (Object.keys(sorter).length > 0) {
          this.isorter.column = sorter.field
          this.isorter.order = sorter.order == 'ascend' ? 'asc' : 'desc'
        }
        this.ipagination = pagination
        this.loadData()
      },
      onCreateTimeChange(date, dateString) {
        this.$set(this.queryParam, 'createTime_begin', dateString[0] + ' 00:00:00')
        this.$set(this.queryParam, 'createTime_end', dateString[1] + ' 23:59:59')
      },
      handleFlag(dataSource){
        if(dataSource){
          //作废的数量
          let cancelNum=dataSource.filter(item=>((item.collectStatus=='process_cancel')));
          //退回的数量
          let returnNum=dataSource.filter(item=>((item.collectStatus=='process_return')));
          //成功的数量
          let succNum=dataSource.filter(item=>((item.collectStatus=='process_success' || item.collectStatus=='process_end_suc' || item.collectStatus=="load")));
          //重新标记=没有成功+（取消大于0或者退回大于0）
          this.remark=((cancelNum.length>0 || returnNum.length>0) && succNum.length==0);
          //重新发起=没有成功 + 作废大于0 + 没有退回
          this.reload=(cancelNum.length>0 && returnNum.length==0 && succNum.length==0);
        }
      },
      loadData(arg) {
        // 加载数据 若传入参数1则加载第一页的内容
        if (arg === 1) {
          this.ipagination.current = 1;
        }
        var params = this.getQueryParams();// 查询条件
        if (!this.erpBillId) {
          this.dataSource = []
          this.ipagination.total = 0
          return
        } else {
          params.erpBillId = this.erpBillId;
        }
        getAction(this.url.urlList, params).then((res) => {
          if (res.success) {
            this.dataSource = res.result.records;
            this.ipagination.total = res.result.total;
            this.handleFlag(this.dataSource);
            // 判断是否当前页没有数据且不为第一页
            if (this.dataSource.length == 0 && this.ipagination.current != 1) {
              this.ipagination.current = this.ipagination.current - 1
              this.loadData(this.ipagination.current - 1);
            } else {
              this.loading = false
            }

          }
        })
      },
      getQueryParams() {
        let param = Object.assign({}, this.queryParam, this.isorter);
        param.field = this.getQueryField();
        param.pageNo = this.ipagination.current;
        param.pageSize = this.ipagination.pageSize;
        return filterObj(param);
      },
      getQueryField() {
        let str = 'id,';
        for (let a = 0; a < this.dragResizeColumns.length; a++) {
          str += ',' + this.dragResizeColumns[a].dataIndex;
        }
        return str;
      },
      searchReset() {
        this.createTime = []
        let that = this;
        Object.keys(that.queryParam).forEach(function (key) {
          that.queryParam[key] = null;
        });
        that.loadData(1);
      },
      searchByquery() {
        this.loadData(1);
      },
      refresh() {
        this.loading = true
      },
      open(record) {
        this.loadData(1);
      },
      // 触发屏幕自适应
      resetScreenSize() {
        let screenWidth = document.body.clientWidth;
        if (screenWidth < 500) {
          this.scrollTrigger = { x: 800 };
        } else {
          this.scrollTrigger = {};
        }
      },
      handleCancel() {
        this.visible = false;
      },
      handleOk() {
        this.handleCancel();
      },
    }
  }
</script>
<style scoped>
  .ant-card-body .table-operator {
    margin-bottom: 18px;
  }

  .ant-table-tbody .ant-table-row td {
    padding-top: 15px;
    padding-bottom: 15px;
  }

  .anty-row-operator button {
    margin: 0 5px
  }

  .ant-btn-danger {
    background-color: #ffffff
  }

  .ant-modal-cust-warp {
    height: 100%
  }

  .ant-modal-cust-warp .ant-modal-body {
    height: calc(100% - 110px) !important;
    overflow-y: auto
  }

  .ant-modal-cust-warp .ant-modal-content {
    height: 90% !important;
    overflow-y: hidden
  }

  .anty-img-wrap {
    height: 25px;
    position: relative;
  }

  .anty-img-wrap > img {
    max-height: 100%;
  }

</style>
